<template>
  <el-dialog
    width="1170px"
    :visible.sync="visible"
    title="素材选择"
    :before-close="handleClose"
  >
    <div class="resource-box">
      <div class="left">
        <div class="title">素材类型</div>
        <div
          class="item"
          :class="{ 'active-item': queryParams.resourceType === item.value }"
          @click="clickItem(item)"
          v-for="item in onlyPic ? [resourceType[0]] : resourceType"
          :key="item.value"
        >
          <svg-icon class-name="folder-icon" icon-class="folder" />
          <span>{{ item.label }}</span>
        </div>
      </div>
      <div class="right">
        <div class="item-box">
          <div
            class="item"
            v-for="item in resourceList"
            @click="acitveItem = item"
            :key="item.id"
          >
            <el-image
              v-if="item.resourceType === 4"
              style="width: 210px; height: 110px"
              :src="item.imageUrl"
            ></el-image>
            <el-image
              v-else
              style="
                width: 90px;
                height: 110px;
                margin-left: 60px;
                padding: 10px 0;
              "
              :src="item.imageUrl"
            ></el-image>
            <div class="file-name" :title="item.resourceName">
              {{ item.resourceName }}
            </div>
            <div v-if="acitveItem.id === item.id" class="active-icon-bg"></div>
            <div v-if="acitveItem.id === item.id" class="active-icon">
              <svg-icon class-name="check-icon" icon-class="check" />
            </div>
          </div>
        </div>
        <pagination
          class="pagination-box"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
    <div slot="footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { QueryResourcePage } from "@/api/course/material.js";
import PdfPic from "@/assets/images/pdf.png";
import VideoPic from "@/assets/images/video.png";
export default {
  name: "RecourseSelectDialog",
  props: {
    onlyPic: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      total: 0,
      queryParams: {
        resourceType: 4,
        pageNum: 1,
        pageSize: 20,
      },
      acitveItem: {},
      resourceType: [
        {
          label: "图片",
          value: 4,
        },
        {
          label: "视频",
          value: 1,
        },
        {
          label: "文件",
          value: 3,
        },
      ],
      resourceList: [],
      visible: true,
    };
  },
  methods: {
    getList() {
      QueryResourcePage(this.queryParams).then((res) => {
        if (res.code === 200) {
          this.resourceList = res.data.list.map((item) => {
            let imageUrl = "";
            if (item.resourceType === 4) {
              imageUrl = "https://" + item.resourceUrl;
            } else if (item.resourceType === 1) {
              imageUrl = VideoPic;
            } else if (item.resourceType === 3) {
              imageUrl = PdfPic;
            }
            return {
              ...item,
              resourceUrl: "https://" + item.resourceUrl,
              imageUrl,
            };
          });
          this.total = res.data.totalCount;
        }
      });
    },
    handleClose() {
      this.$emit("close");
    },
    handleConfirm() {
      this.$emit("confirm", this.acitveItem);
    },
    clickItem(item) {
      this.queryParams.resourceType = item.value;
      this.queryParams.pageNum = 1;
      this.getList();
    },
  },
  mounted() {
    this.getList();
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.resource-box {
  display: flex;
  height: 500px;
  border: 1px solid #ebeef5;
  .left {
    width: 200px;
    border-right: 1px solid #ebeef5;
    padding: 20px;
    .title {
      text-align: left;
      font-size: 16px;
      margin-bottom: 10px;
    }
    .item {
      line-height: 40px;
      cursor: pointer;
      .folder-icon {
        font-size: 20px;
        margin-left: 8px;
        margin-right: 10px;
      }
    }
    .active-item {
      color: #409eff;
      background-color: #ecf5ff;
    }
  }
  .right {
    position: relative;
    flex: 1;
    padding: 16px;
    padding-right: 0;
    .item-box {
      overflow: auto;
      height: calc(100% - 36px);
    }
    .pagination-box {
      position: absolute;
      bottom: 10px;
      left: 0;
      width: 100%;
      border-top: 2px solid #ebeef5;
    }
    .item {
      overflow: hidden;
      position: relative;
      float: left;
      width: 210px;
      height: 150px;
      border: 1px solid #ebeef5;
      margin-right: 16px;
      margin-bottom: 16px;
      cursor: pointer;
      .file-name {
        width: 210px;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 30px;
        text-align: center;
        border-top: 1px solid #ebeef5;
      }
    }
    .active-icon {
      position: absolute;
      z-index: 999;
      right: 5px;
      top: 5px;
      height: 15px;
      width: 15px;
    }
    .active-icon-bg {
      position: absolute;
      z-index: 998;
      right: -30px;
      top: -30px;
      height: 60px;
      width: 60px;
      background-color: #409eff;
      transform: rotate(45deg);
    }
  }
}
</style>